<template>
   <div class="app-container">
      <div class="head-container">
         <a-form :model="queryParams" ref="queryRef" layout="inline">
            <a-form-item prop="ipaddr">
               <a-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 200px" />
            </a-form-item>
            <a-form-item prop="userName">
               <a-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 200px" />
            </a-form-item>
            <a-form-item>
               <a-space>
                  <a-button type="primary" @click="handleQuery">
                     <template #icon>
                        <icon-search />
                     </template>
                     搜索</a-button>
                  <a-button @click="resetQuery">
                     <template #icon>
                        <icon-refresh />
                     </template>
                     重置</a-button>
               </a-space>
            </a-form-item>
         </a-form>
      </div>
      <div class="main-continer">
         <div class="main-content">
            <a-table :columns="columns" :data="onlineList">

            </a-table>
         </div>
      </div>
   </div>
</template>

<script setup name="Online">
import { forceLogout, list as initData } from "@/api/monitor/online";

const onlineList = ref([]);
const loading = ref(true);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);

const queryParams = ref({
   ipaddr: undefined,
   userName: undefined
});

const columns = ref([
   { key: 0, title: '会话编号', dataIndex: 'tokenId' },
   { key: 1, title: '登录名称', dataIndex: 'userName' },
   { key: 2, title: '所属部门', dataIndex: 'deptName' },
   { key: 3, title: '主机', dataIndex: 'ipaddr' },
   { key: 4, title: '登录地点', dataIndex: 'loginLocation' },
   { key: 5, title: '操作系统', dataIndex: 'os' },
   { key: 6, title: '浏览器', dataIndex: 'browser' },
   { key: 7, title: '登录时间', dataIndex: 'loginTime' },
   { key: 8, title: '操作', dataIndex: 'action' }
])

/** 查询登录日志列表 */
function getList() {
   loading.value = true;
   initData(queryParams.value).then(({ data }) => {
      onlineList.value = data;
      total.value = data.total;
      loading.value = false;
   });
}
/** 搜索按钮操作 */
function handleQuery() {
   pageNum.value = 1;
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
}
/** 强退按钮操作 */
function handleForceLogout(row) {
   proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
      return forceLogout(row.tokenId);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(() => { });
}

getList();
</script>
